﻿<!DOCTYPE html5>
<html>
<head>
    <meta charset="utf-8">
    <title>网络攻击地图</title>
    <link rel="stylesheet" type="text/css" href="ipviking.css">
    <link rel="stylesheet" type="text/css" href="flags.css">
    <link rel="stylesheet" type="text/css" href="fonts.css">
</head>

<body class="f16">
<div id="loading">
    <h1>loading...</h1>
</div>
<div id="content">
    <div id="info"></div>
    <div class="data box top-left gray-bg">
        <a href="#" class="toggle" data-target="#left-table-container">
            <div class="table-header">
                <h1>
                    <span class="icon-open"></span>
                    来源
                </h1>
            </div>
        </a>
        <div id="left-table-container" class="table-container">
            <table id="left-data">
                <colgroup>
                    <col class="bar-col" span="1"/>
                    <col class="total-count" span="1"/>
                    <col class="data-label-small" span="1"/>
                    <col class="data-label" span="1"/>
                </colgroup>
                <tr>
                    <th></th>
                    <th><span class="icon-number"></span></th>
                    <th><span class="icon-country"></span></th>
                    <th>国家</th>
                </tr>
            </table>
        </div>
    </div>

    <div class="data box top-right gray-bg">
        <a href="#" class="toggle" data-target="#right-table-container">
            <div class="table-header">
                <h1>
                    <span class="icon-open"></span>
                    目标 </h1>
            </div>
        </a>
        <div id="right-table-container" class="table-container">
            <table id="right-data">
                <colgroup>
                    <col class="bar-col" span="1">
                    <col class="total-count" span="1">
                    <col class="data-label-small" span="1">
                    <col class="data-label" span="1">
                </colgroup>
                <tr>
                    <th></th>
                    <th><span class="icon-number"></span></th>
                    <th class="flag-col"><span class="icon-country"></span></th>
                    <th>国家</th>
                </tr>
            </table>
        </div>
    </div>

    <div class="data bottom-right box gray-bg" style="width: auto;">
        <a href="#" class="toggle" data-target="#bottom-right-table-container-tls">
            <div class="table-header">
                <h1 class="table-header">
                    <span class="icon-open"></span>
                    HTTP排行榜
                </h1>
            </div>
        </a>

        <div id="bottom-right-table-container-tls">
            <table id="bottom-right-data-tls">
                <colgroup>
                    <col class="bar-col" span="1">
                    <col class="total-count" span="1">
                    <col class="data-label-small" span="1">
                    <col class="data-label" span="1">
                    <col class="port-label" span="1">
                </colgroup>
                <tr>
                    <th></th>
                    <th><span class="icon-number"></span></th>
                    <th><span class="icon-threattype"></span></th>
                    <th>域名</th>
                    <th>协议</th>
                </tr>
            </table>
        </div>
    </div>
    <div class=" data box gray-bg" style="right: 350px; width:auto;bottom: 50px;">
        <a href="#" class="toggle" data-target="#bottom-right-table-container">
            <div class="table-header">
                <h1 class="table-header">
                    <span class="icon-open"></span>
                    协议
                </h1>
            </div>
        </a>

        <div id="bottom-right-table-container">
            <table id="bottom-right-data">
                <colgroup>
                    <col class="bar-col" span="1">
                    <col class="total-count" span="1">
                    <col class="data-label-small" span="1">
                    <col class="data-label" span="1">
                    <col class="port-label" span="1">
                </colgroup>
                <tr>
                    <th></th>
                    <th><span class="icon-number"></span></th>
                    <th><span class="icon-threattype"></span></th>
                    <th>协议</th>
                    <th>端口</th>
                </tr>
            </table>
        </div>
    </div>


    <div id="console" class="box gray-bg">
        <a href="#" class="toggle" data-target="#console-table-container">
            <div class="table-header">
                <h1 class="table-header">
                    <span class="icon-open"></span>
                    请求列表
                </h1>
            </div>
        </a>
        <div id="console-table-container">
            <table id="events-data">
                <colgroup class="second-level">
                    <col class="timestamp-col" span="1">
                    <col class="attacker-org-col left-border" span="1">
                    <col class="location-col" span="1">
                    <col class="attacker-ip-col" span="1">
                    <col class="location-col left-border" span="1">
                    <col class="service-col left-border" span="1">
                    <col class="port-col" span="1">
                </colgroup>



                <tr class="second-level">
                    <th>时间</th>
                    <th>组织</th>
                    <th>源地址</th>
                    <th>IP</th>
                    <th>目的地址</th>
                    <th>协议</th>
                    <th>端口</th>
                </tr>
            </table>
        </div>
    </div>
    <div class="info-controls">
        <div class="gray-bg information info-btn">
            <span class="info-text icon-info"></span></li>
        </div>
        <div data-paused="false" class="gray-bg controls">
            <span class="icon-pause play-pause"></span>
        </div>
    </div>


    <div id="social-icons" class="gray-bg">
        网络数据包分布图
    </div>
</div>

<div id="drawer">
    <!-- <div id="nav-bottom-corner"></div> -->
    <div id="drawer-content" class="blue-bg">
        <div id="drawer-inner">
            <div id="drawer-left">
                <h1>其实这里就是一广告</h1>
                <script type="text/javascript">
                    /*400*300 创建于 2014-11-04*/
                    var cpro_id = "u1789765";
                </script>
                <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
                <div id="legend-container">
                    <div id="particle-legend">
                        <h4><span class="icon-open"></span>
                            <p>每个粒子代表一个攻击</p></h4>
                        <p id="particle-legend-content"></p>
                    </div>
                    <div id="origin-legend">
                        <h4><span class="icon-open"></span>
                            <p>这是攻击来源</p></h4>
                        <p>
                            <span class="icon-one"></span>
                            <span class="icon-ten"></span>
                            <span class="icon-twohundred"></span>
                        </p>
                    </div>
                    <div id="country-legend">
                        <h4><span class="icon-open"></span>
                            <p>这是被攻击国家</p></h4>
                        <p>
                            <span class="icon-one" style="color: #1e1e1e;"></span>
                            <span class="icon-five" style="color: #1e2637;"></span>
                            <span class="icon-twentyfive" style="color: #1e2e50;"></span>
                            <span class="icon-onehundred" style="color: #1e3565;"></span>
                            <span class="icon-fivehundred" style="color: #1e3d7e;"></span>
                        </p>
                    </div>
                </div>

                <footer>
                    <p>
                    <div style="display: none;">
                        <script type="text/javascript">
                            var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
                            document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F0269746fd173966c3ed921112fd5a8c2' type='text/javascript'%3E%3C/script%3E"));
                        </script>
                    </div>
                    <a href="#">不错吧</a></span>
                </footer>
            </div>
        </div>

        <div id="message-panel" class="data box">
            <div class="table-header gray-bg">
                <h3>Message Dialog</h3>
            </div>
            <div id="message-container" class="black-solid table-container">
                <span id="message-text"></span>
                <button id="close-button" class="-bg" gray onClick="hideMessage();">Close</button>
            </div>
        </div>

        <img id="unknown-icon" src="images/unknown-poly.png"/>

        <script type="text/javascript" src="d3.v3.min.js"></script>
        <script type="text/javascript" src="queue.v1.min.js"></script>
        <script type="text/javascript" src="topojson.v1.min.js"></script>
        <script type="text/javascript" src="ipviking.js"></script>
        <script type="text/javascript" src="presentations.js"></script>
</body>
</html>

